<template>
  <div>
    <div class="searchBox">
      <div class="items">
        <el-input type="text" placeholder="订单编号" v-model="orderID"></el-input>
        <el-button class="el-icon-search" type="success" @click="search(orderID)">搜索</el-button>
      </div>
   
    </div>
    <div class="info_table">
      <el-table :data="tableData" border style="width: 100%" max-height="400">
        <el-table-column prop="orderID" label="订单编号" width="100">
        </el-table-column>
        <el-table-column prop="custID" label="客户编号" width="100">
        </el-table-column>
        <el-table-column prop="proID" label="商品编号" width="100">
        </el-table-column>
        <el-table-column prop="orderAmount" label="商品数量" width="130">
        </el-table-column>
        <el-table-column prop="num" label="配送员id" width="130">
        </el-table-column>
        <el-table-column prop="date" label="订单日期" width="130">
        </el-table-column>
        <el-table-column prop="state" label="订单处理情况" width="130">
        </el-table-column>
        <el-table-column prop="total" label="总金额"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
export default {
  data() {
    return {
      tableData: [],
      orderID:'',
     
    };
  },
  methods:{
    search(id){
      axios({
        url:'http://localhost:3000/searchO',
        method:'post',
        data:qs.stringify({
          id:id
        })
      }).then((success)=>{
        this.tableData=success.data
      })
    }
  },
  mounted() {
    axios({
      url: "http://localhost:3000/orderInfo",
      method: "get",
    }).then((succ) => {
    this.tableData=succ.data
    });
  }
};
</script>

<style scoped>
.searchBox {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.items {
  display: flex;
}
</style>